/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: liuzicheng
 * @Date: 2025-02-21 16:28:54
 * @LastEditors: liuzicheng
 * @LastEditTime: 2025-03-05 11:15:22
 */
import { ProForm, ProFormText, ProFormCaptcha } from "@ant-design/pro-components";
import { Button, message } from "antd";
import { useState } from "react";
// import loginBg from "@/assets/images/login-bg.svg"
import { useNavigate } from "react-router";

export default () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const handleSubmit = async (values: any) => {
    try {
      setLoading(true);
      console.log(values);
      message.success("登录成功");
      // 这里可以添加登录逻辑
      localStorage.setItem("token", "123456");
      navigate("/", { replace: true });
    } catch (error) {
      console.error(error);
      message.error("登录失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-[url(@/assets/images/login-bg.svg)] bg-cover bg-center bg-no-repeat">
      <div
        className="wh-full f-c-c min-h-screen relative bg-cover bg-center bg-no-repeat"
        // style={{ backgroundImage: `url(${loginBg})` }}
      >
        {/* 轻微模糊效果 */}
        <div className="absolute inset-0 backdrop-blur-2px"></div>

        {/* 登录卡片 */}
        <div className="relative z-10 bg-white dark:bg-#1f1f1f bg-opacity-95 dark:bg-opacity-85 rounded-20 shadow-2xl p-36 w-full max-w-480px transition">
          <div className="absolute -top-16 left-1/2 transform -translate-x-1/2 w-80px h-80px rounded-full bg-white dark:bg-#1f1f1f shadow-lg f-c-c">
            <div className="text-36px text-blue-500">
              <i className="i-me-logo"></i>
            </div>
          </div>

          <h2 className="text-30px font-bold text-center mt-48 mb-36 text-base">用户登录</h2>

          <ProForm onFinish={handleSubmit} submitter={false}>
            <ProFormText
              name="username"
              label="账号"
              placeholder="请输入账号"
              rules={[{ required: true, message: "请输入账号" }]}
              fieldProps={{
                size: "large",
                className: "rounded-8"
              }}
            />
            <ProFormText.Password
              name="password"
              label="密码"
              placeholder="请输入密码"
              rules={[{ required: true, message: "请输入密码" }]}
              fieldProps={{
                size: "large",
                className: "rounded-8"
              }}
            />
            <ProFormCaptcha
              name="captcha"
              label="验证码"
              placeholder="请输入验证码"
              rules={[{ required: true, message: "请输入验证码" }]}
              onGetCaptcha={async () => {
                message.success("验证码已发送");
              }}
              fieldProps={{
                size: "large",
                className: "rounded-8"
              }}
            />

            <div className="mt-12">
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                className="w-full h-50px text-18px rounded-10 f-c-c transition hover:shadow-md"
              >
                登录
              </Button>
            </div>

            <div className="mt-24 flex justify-between text-14px">
              <a className="text-blue-500 hover:text-blue-600 transition">忘记密码</a>
              <a className="text-blue-500 hover:text-blue-600 transition">注册账号</a>
            </div>
          </ProForm>
        </div>

        {/* 页脚版权信息 */}
        <div className="absolute bottom-6 text-center w-full text-gray-500 text-12px">
          © {new Date().getFullYear()} 公司名称 版权所有
        </div>
      </div>
    </div>
  );
};
